import type { PropsWithChildren, ReactNode } from "react";
import './index.css';

type SectionProps = PropsWithChildren<{
  title?: string;
  type?: 'form' | 'table';
  anchor?: string;
  description?: ReactNode;
  buttons?: ReactNode;
  search?: ReactNode;
}>;

export default function Section({ title, type = 'form', anchor, buttons, description, search, children }: SectionProps) {
  return (
    <section className={`kl-section kl-section-${type}`}>
      {anchor && <a id={anchor} className="kl-section-anchor" />}
      {(title || buttons) && <div className="kl-section-title">
        <strong>{title}</strong>
        {description && <span className="kl-section-title-description">{description}</span>}
        {buttons && <div className="kl-section-title-buttons">{buttons}</div>}
      </div>}
      {search && <div className="kl-section-search">{search}</div>}
      <div className="kl-section-content">{children}</div>
    </section>
  );
}